একটি এলিমেন্টের বিশেষ অবস্থাকে সিলেক্ট করার জন্য সুডো ক্লাস ব্যবহার করা হয়। সুডো ক্লাস ব্যবহার করার জন্য আপনাকে কোনো অতিরিক্ত জাভাস্ক্রিপ্ট অথবা অন্য কোনো স্ত্রিপ্ট ব্যবহার করতে হবে না। উদাহরণস্বরূপ, আপনি কোনো এলিমেন্টের হোবারকে সিলেক্ট করতে চাইলে সুডো-ক্লাস :hover এর মাধ্যমে সিলেক্ট করতে হবে।
উদাহরণ হিসেবে আমরা নিচের অংশটুকু দেখতে পারিঃ
নিচের ধূসর রংয়ের বক্সের মধ্যে মাউস নিয়ে আসুন। অবাক হয়েছেন!! মাউস আনার সাথে সাথেই বক্সের রং পরিবর্তন হয়ে গেছে।
মাউস আনুন, পরিবর্তন দেখুন।
| সিলেক্টর | উদাহরণ | বর্ণনা |
|---|---|---|
:active | a:active | একটিভ লিংককে সিলেক্ট করবে। |
:checked | input:checked | যেসকল <input> এলিমেন্ট "checked" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে। |
:disabled | input:disabled | যেসকল <input> এলিমেন্ট "disabled" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে। |
:empty | div:empty | যেসকল <div> এলিমেন্টের কোন চাইল্ড এলিমেন্ট নেই তাদেরকে সিলেক্ট করবে। |
:enabled | input:enabled | প্রত্যেকটি সক্রিয় <input> এলিমেন্টকে সিলেক্ট করবে। |
:first-child | li:first-child | প্যারেন্ট এলিমেন্টের প্রথম <li> চাইল্ড এলিমেন্টকে সিলেক্ট করবে। |
:first-of-type | li:first-of-type | প্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো <li> এলিমেন্টের মধ্যে প্রথম <li> এলিমেন্টকে সিলেক্ট করবে। |
:focus | input:focus | ফোকাসকৃত <input> এলিমেন্টকে সিলেক্ট করবে। |
:hover | div:hover | <div> এলিমেন্টের উপর মাউসের কার্সর থাকা অবস্থাকে সিলেক্ট করবে। |
:in-range | input:in-range | একটি নির্দিষ্ট রেঞ্জের ভ্যালুসহ <input> এলিমেন্টকে সিলেক্ট করবে। |
:invalid | input:invalid | ইনভ্যালিড ভ্যালুযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:lang | p:lang(lan) | lang এট্রিবিউটের "lan" এর ভ্যালুযুক্ত সকল <p> এলিমেন্টকে সিলেক্ট করে |
:last-child | li:last-child | প্যারেন্ট এলিমেন্টের সর্বশেষ <li> চাইল্ড এলিমেন্টকে সিলেক্ট করবে। |
:last-of-type | li:last-of-type | প্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো <li> এলিমেন্টের মধ্যে সর্বশেষ <li> এলিমেন্টকে সিলেক্ট করবে। |
:link | a:link | একটি সাধারণ আন-ভিজিটেড লিংককে সিলেক্ট করবে। |
:not(selector) | :not(div) | <div> এলিমেন্ট ছাড়া সকল এলিমেন্টকে সিলেক্ট করবে |
:nth-child(n) | p:nth-child(2) | প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড <p> এলিমেন্টকে সিলেক্ট করবে। |
:nth-last-child(n) | p:nth-last-child(2) | একই প্যারেন্ট এলিমেন্টের শেষের দিক থেকে দ্বিতীয় চাইল্ড <p> এলিমেন্টকে সিলেক্ট করবে। |
:nth-last-of-type(n) | p:nth-last-of-type(2) | একই প্যারেন্ট এলিমেন্টের সবগুলো <p> এলিমেন্টের মধ্যে শেষের দিক থেকে দ্বিতীয় <p> এলিমেন্টকে সিলেক্ট করবে। |
:nth-of-type(n) | p:nth-of-type(2) | প্যারেন্ট এলিমেন্টের সবগুলো <p> এলিমেন্টের মধ্যে দ্বিতীয় <p> এলিমেন্টকে সিলেক্ট করবে। |
:only-of-type | p:only-of-type | যদি <p> এলিমেন্টটি তার প্যারেন্টের একমাত্র <p> এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে। |
:only-child | p:only-child | যদি <p> এলিমেন্টটি তার প্যারেন্টের একমাত্র চাইল্ড এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে। |
:optional | input:optional | required এট্রিবিউট ব্যাতীত বাকি <input> এলিমেন্টগুলোকে সিলেক্ট করবে। |
:out-of-range | input:out-of-range | নির্দিষ্ট রেঞ্জের বাহিরের ভ্যালুযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:read-only | input:read-only | "readonly" এট্রিবিউটযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:read-write | input:read-write | "readonly" এট্রিবিউট ব্যাতীত বাকি সবগুলো <input> এলিমেন্টকে সিলেক্ট করবে। |
:required | input:required | "required" এট্রিবিউটযুক্ত সবগুলো <input> এলিমেন্টকে সিলেক্ট করবে। |
:root | root | ডকুমেন্টের মূল(সাধারনত <html>) এলিমেন্টকে সিলেক্ট করবে। |
:target | #news:target | সক্রিয় #news আইডি যুক্ত এলিমেন্টকে সিলেক্ট করবে। |
:valid | input:valid | সকল ভ্যালিড ভ্যালুযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:visited | a:visited | ভিজিটেড লিংককে সিলেক্ট করবে। |
সুডো-ক্লাস এর গঠন প্রণালীঃ
selector:pseudo-class {
property: value;
}একটি লিংককে আমরা বিভিন্ন পর্যায়ে বিভিন্ন ভাবে প্রদর্শন করতে পারিঃ
kt_satt_skill_example_id=866
উপরের উদাহরণটিতে লিংকের বিভিন্ন অবস্থাকে সুডো-ক্লাসের মাধ্যমে সিলেক্ট করে স্টাইল করা হয়েছে। এখানে a:hover অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে। তা না হলে a:hover কাজ করবে না। এছাড়া a:active কে অবশ্যই a:hover এর নিচে লিখতে হবে। তা না হলে a:hover কাজ করবে না।
আমরা সিএসএস ক্লাসের সাথে সুডো-ক্লাস গুলোকে একত্রে ব্যবহার করতে পারি।
নিম্নের উদাহরণটিতে আমরা দেখবো একটি লিংকে কিভাবে হোভার যুক্ত করতে হয়ঃ
kt_satt_skill_example_id=867
< div> এর মধ্যে হোভারনিম্নের উদাহরণটিতে আমরা দেখবো কিভাবে :hover সুডো-ক্লাস ব্যবহার করে কিভাবে একটি <div> এলিমেন্টের হোভারের সময় কালার পরিবর্তন করা যায়ঃ
kt_satt_skill_example_id=868
নিম্নের উদাহরণে < div> এলিমেন্টটিতে হোভার করলে অনেকটা টুলটিপ আকারে একটি < p> এলিমেন্ট দেখা যাবে।
kt_satt_skill_example_id=869
:first-child সুডো-ক্লাসপ্যারেন্ট এলিমেন্টের প্রথম চাইল্ডকে সিলেক্ট করতে আমরা :first-child সুডো ক্লাস ব্যবহার করবো।
নিম্নের উদাহরণটিতে প্যারেন্ট এলিমেন্টের প্রথম চাইল্ড যদি <p> এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।
kt_satt_skill_example_id=871
< div> এলিমেন্টের মধ্যের < p> এলিমেন্ট সিলেক্টনিম্নের উদাহরণে < div> এলিমেন্টের মধ্যে অবস্থিত প্রথম < p> এলিমেন্টটি সিলেক্ট করবে।
kt_satt_skill_example_id=872
< li> এর মধ্যে < span> এলিমেন্ট গুলো সিলেক্টনিম্নের উদাহরণটিতে প্রথম চাইল্ড এলিমেন্ট < li> কে খুজে বের করে তার মধ্যকার < span> এলিমেন্ট গুলো সিলেক্ট করবে।
kt_satt_skill_example_id=880
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
